<template>
<div>
  <p>首页登录</p>
  <el-form ref="loginForm" :model="userForm" label-width="120px" :rules="rules">
    <!-- 用户名 -->
    <el-form-item label="用户名" prop="name">
      <el-input v-model="userForm.name" />
    </el-form-item>
    <!-- 密码 -->
    <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;码" prop="password">
      <el-input type="password" v-model="userForm.password"/>
    </el-form-item>
    <!-- 提交表单 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm" style="width:100%">登录</el-button>
    </el-form-item>
  </el-form>
</div>
 
</template>

<script>
export default {
 name: '',
 components:{},
 data() {
   return {
    //  初始化表单
     userForm:{
       'name':'',
       'password':''
     },
    //  验证校验
    rules:{
      'name':
      [
        {required: true,message:'请输入用户名',trigger:'blur'},
        {min:3,max:16,message:'长度在 3 到 16 个字符'}
      ],
      'password':
      [
        {required:true,message:'请输入密码',trigger:'blur'},
        {min:6,max:20,message:'密码长度在 6 到 20 个字符'}
      ]
    }
   }
 },
 created() {
 },
 computed: {
 },
 methods: {
   getEl(){
     console.log(this.$refs.myref.tagName,this.$refs.myref2.innerText)
   },
   submitForm(){
     this.$refs.loginForm.validate(e=>{
       console.log(e)
      if(!e){
        return
      }
      // this.$router.push('/home')
      this.$router.push({name:'home'})
     })
    //  this.$router.push('/home')
   }
 },
}
</script>
<style>
</style>